<template>
  <div class="layout">
    <Layout>
      <Header class="layout-header bg-white px-0">
        <Menu
          mode="horizontal"
          :theme="theme"
          active-name="1"
          class="flex align-items"
          @on-select="selecton"
        >
          <div class="layout-logo">鲸云网盘</div>
          <!-- <MenuItem name="1">
            <Icon type="md-paper" />
            网盘
          </MenuItem>
          <MenuItem name="2">
            <Icon type="md-people" />
            分享
          </MenuItem>
          <MenuItem name="3">
            <Icon type="md-construct" />
            更多
          </MenuItem> -->
          <div class="mr">
            <Dropdown>
              <a href="javascript:void(0)">
                <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
                管理员
                <Icon type="ios-arrow-down"></Icon>
              </a>
              <template #list>
                <DropdownMenu>
                  <!-- <DropdownItem>个人资料</DropdownItem>
                  <DropdownItem>修改密码</DropdownItem> -->
                  <DropdownItem @click="logout">退出登录</DropdownItem>
                </DropdownMenu>
              </template>
            </Dropdown>
          </div>
        </Menu></Header
      >
      <Layout>
        <Sider class="layout-sider bg-light" hide-trigger>
          <Menu :theme="theme" @on-select="selectmenu" :active-name="activeName" class="menu">
            <MenuItem name="1" to="/index">
                <Icon type="md-document" />
                全部文件
              </MenuItem>
             <MenuGroup title="其他操作">
              <MenuItem name="3" to="/index1">
                <Icon type="md-heart" />
                我的分享
              </MenuItem>

            </MenuGroup>
          </Menu>
        </Sider>
        <Content class="layout-content bg-white"><router-view></router-view></Content>
      </Layout>
      <Footer class="layout-footer bg-white px-0">
        <div style="width:200px" class="">
         <Progress :percent="size.bfb"  :stroke-width="20"  text-inside style="width:100%" />
        </div>
         <div class="justify-between w200  mt-2 flex" style="padding:0px 10px;box-sizing:border-box;">
        <div class="bg-light">总共:{{size.total_size}}GB</div>
        <div>已用:{{size.used_size}}GB</div>
        </div>
      </Footer>
    </Layout>
  </div>
</template>
<script setup>

import { Message } from 'view-ui-plus';
import { onMounted,ref } from 'vue';
import service from "../utils/request";
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const size=ref({});
const selecton = (e) => {
  console.log(e, "eee");
  
};
const logout=()=>{
  window.localStorage.clear()
  Message.success("退出登录成功")
  router.push({
    path:"/"
  })
}
const getsize=async ()=>{
  const res=await service.post("/getsize");
  console.log(res);
size.value=res.data
size.value.total_size=size.value.total_size/1024/1024
size.value.used_size=(size.value.used_size/1024/1024).toFixed(2)
size.value.bfb = size.value.used_size/size.value.total_size
}
const selectmenu=(e)=>{
console.log(e,"e")
window.localStorage.setItem("newmenu",e);

}
const activeName=ref("1")
onMounted(()=>{
activeName.value=window.localStorage.getItem("newmenu")
  getsize()
})
</script>
<style scoped>
.layout {
  width: 100%;
  height: 100%;
}
</style>
<style>
.ivu-layout {
  width: 100%;
  height: 100%;
}
.bg-white {
  background: #fff !important;
}
.px-0 {
  padding-left: 0px !important;
}
.bg-light {
  background: #f8f9fa !important;
}
.flex {
  display: flex !important;
}
.align-items {
  align-items: center;
}
.layout-logo {
  width: 200px;
  text-align: center;
  font-size: 25px;
}
.mr {
  margin-left: auto !important;
  margin-right: 0px;
}
.justify-between{
    justify-content: space-between;
}
.w200{
    width: 200px;
}
.mt-2{
    margin-top: 20px;
}
.layout-content{
    width: calc(100% - 200px) !important;
}
.menu{
width: 200px !important;
}
</style>